import React from 'react'
import { Table, Pagination, Popover } from 'antd'
import styles from './table.scss'
import util from '@/utils'
import colors from '@/constants/colors'

const { Column } = Table

const BatchRecordTable = (props) => {

  const { pageNum, pageSize, total, auditBatchStatusEnum, data, loading } = props

  const statusColor = {
    1: colors.statusPending,
    2: colors.statusPendSuc,
    3: colors.statusPendFai
  }

  return (
    <div>
      <Table dataSource={data} pagination={false} loading={loading} rowKey={({id}) => id}>
        <Column title="批次编号" dataIndex="batchId" align="center" />
        <Column title="账号" dataIndex="account" align="center" />
        <Column title="手机号数量" dataIndex="phoneCount" align="center" />
        <Column title="短信内容" dataIndex="content" width={200} render={(props) => (
          <Popover content={props} trigger="click">
            <div className="single-line text-l">
              {props}
            </div>
          </Popover>
        )} />
        <Column title="请求IP" dataIndex="ip" align="center" />
        <Column title="回调地址" dataIndex="notifyUrl" align="center" />
        <Column title="状态" dataIndex="status" render={(value) =>(
          <span style={{ color: statusColor[value]}}>
           {util.getEnumDesc(auditBatchStatusEnum, value)}
          </span>
        )} align="center" width={120}/>
        <Column title="提交时间" dataIndex="createTime" render={(props) => util.transformTimeStampToString(props)} align="center" />
      </Table>
      {!!total && (<div className={styles["pagination-container"]}>
        <Pagination 
          className={styles["pagination"]}
          showQuickJumper
          showTotal={(total, range) => `共${total}条`} 
          pageSize={pageSize} 
          current={pageNum}
          total={total} 
          onChange={props.onChangePagination} 
        />
      </div>)}
    </div>
  )
}

export default BatchRecordTable